<template>
  <div>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>

    <div class="topBox">
      <h2>任务信息</h2>
      <div class="zhankai">
        <span @click="change">{{message}}</span>
        <!-- <span>展开∨</span> -->
      </div>

      <div class="title" v-if="seen">
        <h3>公司汇报任务时的汇报主题展示</h3>
        <span>任务类型 :</span>
        <span>自查自纠</span>

        <span class="lianxiren" >联系人 :</span>
        <span class="name">王磊</span>

        <span>联系方式 :</span>
        <span>13812345678</span>
        <div class="titleo" v-if="number==1">
          <span>发布时间 :</span>
          <span>2019-10-11 12:30:26</span>
          <span class="finish">完成时间 :</span>
          <span>2019-10-11 12:30:26</span>
        </div>
      </div>
    </div>
    <div class="banner" v-if="seen">
      <p>车思此已非会快平名的向总心毛后一象当引取给快期却酸都会由己步飞理里成作圆到成公持量管金中给路等具每叫比走。划头再属老老场装政什证史作类系同热系记被经育报界厂根离应观斯广列果地话快强条反程对张象路养解快身江义连越动须边光都此值发金么积求历间选接变始。给器之况分为林放律同史物会义量选法以所结界想问装总气基同几具联理法心五结业解面三存与变群今都其力处期她资想联二。装公装育水西教已团教须十本复去收金个历单拉都放十放对等立话资样小多完程本过中连了东心领文条专出该劳省想确往院规作资其具际书离世毛。道增先该代路型自发都原何龙委各西市她经不她强指处生下及应指农人公派称江期点七次那律处回分离段本国严厂装口容于。制越维类持价厂科使下与么阶品思规省路布至想样子计期气又组派联安并加步那声调作提权太提三却能。要单话光精不期将根起基然过五更子五作自除政想安如们我列六国几造验事整商头运大书开写个那而就总。响系者任前需维全建从织清断花样维定计南中员指矿明八斯做部起易式克目但值和称类条面边就道便青在设业器打手三一的压示作始信些。月许明且程会广动证切每与边的术目专石边导进社联什最内党条江文温名空备打方型下特总团一加果支合构水口万题例表严革经他教省。则片很光除生口家院天头根着九指地看写时先起断几达又动江千第子美分名想圆话么劳族资条林己处总强口东什。把情则这支论际八马且结据物几土位来传育战组江越接命天切无机各出无战下问之导其办前济把且还却高土处号干持于。价工并大济工之院利际点提红根山你花华同律总满增间却增度件出已千过把五国济一长世象即有许统收铁总设处利此治近。光精度由张门活才法在精而准群大段个低无还先议总难严保做因决了权细当圆反标光参验如感产细品到论点而都消物。程动议体场方存少证与周长天委极花程它比院求矿月新济现张强发世该此目传问意斗儿主引往段知部不构三置无明三统克片发看或边象向至军都形目况。</p>
      <p>车思此已非会快平名的向总心毛后一象当引取给快期却酸都会由己步飞理里成作圆到成公持量管金中给路等具每叫比走。划头再属老老场装政什证史作类系同热系记被经育报界厂根离应观斯广列果地话快强条反程对张象路养解快身江义连越动须边光都此值发金么积求历间选接变始。给器之况分为林放律同史物会义量选法以所结界想问装总气基同几具联理法心五结业解面三存与变群今都其力处期她资想联二。装公装育水西教已团教须十本复去收金个历单拉都放十放对等立话资样小多完程本过中连了东心领文条专出该劳省想确往院规作资其具际书离世毛。道增先该代路型自发都原何龙委各西市她经不她强指处生下及应指农人公派称江期点七次那律处回分离段本国严厂装口容于。制越维类持价厂科使下与么阶品思规省路布至想样子计期气又组派联安并加步那声调作提权太提三却能。要单话光精不期将根起基然过五更子五作自除政想安如们我列六国几造验事整商头运大书开写个那而就总。响系者任前需维全建从织清断花样维定计南中员指矿明八斯做部起易式克目但值和称类条面边就道便青在设业器打手三一的压示作始信些。月许明且程会广动证切每与边的术目专石边导进社联什最内党条江文温名空备打方型下特总团一加果支合构水口万题例表严革经他教省。则片很光除生口家院天头根着九指地看写时先起断几达又动江千第子美分名想圆话么劳族资条林己处总强口东什。把情则这支论际八马且结据物几土位来传育战组江越接命天切无机各出无战下问之导其办前济把且还却高土处号干持于。价工并大济工之院利际点提红根山你花华同律总满增间却增度件出已千过把五国济一长世象即有许统收铁总设处利此治近。光精度由张门活才法在精而准群大段个低无还先议总难严保做因决了权细当圆反标光参验如感产细品到论点而都消物。程动议体场方存少证与周长天委极花程它比院求矿月新济现张强发世该此目传问意斗儿主引往段知部不构三置无明三统克片发看或边象向至军都形目况。</p>
    </div>
    <!-- 问题清单附件 -->
    <div class="item_wrap" v-if="seen">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单附件</div>
        </div>
        <!-- <el-upload
          action="http://192.168.2.34:8080/"
          :file-list="fileList"
          accept=".PDF"
          @on-success="uploadSuccess"
          :show-file-list="false"
        >
        </el-upload> -->
      </div>
      <div v-if="fileList.length == 0" class="note">暂无附件</div>
      <div v-else class="fileList">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="file_item">
            <img class="left" :src="pdf" alt />
            <div class="right">
              <div class="title">{{ item.name }}</div>
              <div class="done_wrap">
                <div class="size">{{ item.size }}</div>
                <div class="innerRight">
                  <div>
                    <img class="image1" :src="preview" alt />
                    <span>预览</span>
                  </div>
                  <span class="done">|</span>
                  <div>
                    <img class="image1" :src="download" alt />
                    <span>下载</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="del">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 问题清单附件 -->

    <div class="box">
      <div class="topBox">
        <!-- <h2>任务信息</h2> -->
        <div class="title">
          <h3>公司汇报任务时的汇报主题展示</h3>
          <span>汇报时间 :</span>
          <span>2019-10-11 12:30:26</span>
        </div>
      </div>
      <div class="banner">
        <p>车思此已非会快平名的向总心毛后一象当引取给快期却酸都会由己步飞理里成作圆到成公持量管金中给路等具每叫比走。划头再属老老场装政什证史作类系同热系记被经育报界厂根离应观斯广列果地话快强条反程对张象路养解快身江义连越动须边光都此值发金么积求历间选接变始。给器之况分为林放律同史物会义量选法以所结界想问装总气基同几具联理法心五结业解面三存与变群今都其力处期她资想联二。装公装育水西教已团教须十本复去收金个历单拉都放十放对等立话资样小多完程本过中连了东心领文条专出该劳省想确往院规作资其具际书离世毛。道增先该代路型自发都原何龙委各西市她经不她强指处生下及应指农人公派称江期点七次那律处回分离段本国严厂装口容于。制越维类持价厂科使下与么阶品思规省路布至想样子计期气又组派联安并加步那声调作提权太提三却能。要单话光精不期将根起基然过五更子五作自除政想安如们我列六国几造验事整商头运大书开写个那而就总。响系者任前需维全建从织清断花样维定计南中员指矿明八斯做部起易式克目但值和称类条面边就道便青在设业器打手三一的压示作始信些。月许明且程会广动证切每与边的术目专石边导进社联什最内党条江文温名空备打方型下特总团一加果支合构水口万题例表严革经他教省。则片很光除生口家院天头根着九指地看写时先起断几达又动江千第子美分名想圆话么劳族资条林己处总强口东什。把情则这支论际八马且结据物几土位来传育战组江越接命天切无机各出无战下问之导其办前济把且还却高土处号干持于。价工并大济工之院利际点提红根山你花华同律总满增间却增度件出已千过把五国济一长世象即有许统收铁总设处利此治近。光精度由张门活才法在精而准群大段个低无还先议总难严保做因决了权细当圆反标光参验如感产细品到论点而都消物。程动议体场方存少证与周长天委极花程它比院求矿月新济现张强发世该此目传问意斗儿主引往段知部不构三置无明三统克片发看或边象向至军都形目况。</p>
        <p>车思此已非会快平名的向总心毛后一象当引取给快期却酸都会由己步飞理里成作圆到成公持量管金中给路等具每叫比走。划头再属老老场装政什证史作类系同热系记被经育报界厂根离应观斯广列果地话快强条反程对张象路养解快身江义连越动须边光都此值发金么积求历间选接变始。给器之况分为林放律同史物会义量选法以所结界想问装总气基同几具联理法心五结业解面三存与变群今都其力处期她资想联二。装公装育水西教已团教须十本复去收金个历单拉都放十放对等立话资样小多完程本过中连了东心领文条专出该劳省想确往院规作资其具际书离世毛。道增先该代路型自发都原何龙委各西市她经不她强指处生下及应指农人公派称江期点七次那律处回分离段本国严厂装口容于。制越维类持价厂科使下与么阶品思规省路布至想样子计期气又组派联安并加步那声调作提权太提三却能。要单话光精不期将根起基然过五更子五作自除政想安如们我列六国几造验事整商头运大书开写个那而就总。响系者任前需维全建从织清断花样维定计南中员指矿明八斯做部起易式克目但值和称类条面边就道便青在设业器打手三一的压示作始信些。月许明且程会广动证切每与边的术目专石边导进社联什最内党条江文温名空备打方型下特总团一加果支合构水口万题例表严革经他教省。则片很光除生口家院天头根着九指地看写时先起断几达又动江千第子美分名想圆话么劳族资条林己处总强口东什。把情则这支论际八马且结据物几土位来传育战组江越接命天切无机各出无战下问之导其办前济把且还却高土处号干持于。价工并大济工之院利际点提红根山你花华同律总满增间却增度件出已千过把五国济一长世象即有许统收铁总设处利此治近。光精度由张门活才法在精而准群大段个低无还先议总难严保做因决了权细当圆反标光参验如感产细品到论点而都消物。程动议体场方存少证与周长天委极花程它比院求矿月新济现张强发世该此目传问意斗儿主引往段知部不构三置无明三统克片发看或边象向至军都形目况。</p>
      </div>

      <!-- 问题清单附件 -->
      <div class="item_wrap">
        <div class="title_wrap hasbutton">
          <div class="left">
            <div class="line"></div>
            <div class="title">问题清单附件</div>
          </div>
          <!-- <el-upload
            action="http://192.168.2.34:8080/"
            :file-list="fileList"
            accept=".PDF"
            @on-success="uploadSuccess"
            :show-file-list="false"
          >
            <el-button>上传文件</el-button>
          </el-upload> -->
        </div>
        <div v-if="fileList.length == 0" class="note">暂无附件</div>
        <div v-else class="fileList">
          <div v-for="(item, index) in fileList" :key="index">
            <div class="file_item">
              <img class="left" :src="pdf" alt />
              <div class="right">
                <div class="title">{{ item.name }}</div>
                <div class="done_wrap">
                  <div class="size">{{ item.size }}</div>
                  <div class="innerRight">
                    <div>
                      <img class="image1" :src="preview" alt />
                      <span>预览</span>
                    </div>
                    <span class="done">|</span>
                    <div>
                      <img class="image1" :src="download" alt />
                      <span>下载</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="del">
                <i class="el-icon-close"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 问题清单附件 -->
    </div>
  </div>
</template>
<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    // BaiduMap,
  },
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),
      message: "收起∧",
      fileList: [
        {
          name: "这里是文档名称.PDF",
          size: "11.6M",
        },
      ],
      number: "",
       seen:true,
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "公司档案",
          link: "archives",
        },
        {
          name: "公司档案详情",
          link: "Detail",
        },
        {
          name: "专项监督更多",
          link: "LetterMore",
        },
      ],
    };
  },
  created() {
    let number = this.$route.query.number;
    this.get();
  },
  mounted() {
    this.taskReportDetail()
  },
  methods: {
    taskReportDetail(){
      this.Api.taskReportDetail({id:this.$route.query.id}).then((res) => {
        if (res.code == 0) {
          this.infoData = res.data
        }
      })
    },
    change() {
      this.seen = !this.seen;
      if (this.seen) {
        this.message = "收起∧";
      } else {
        this.message = "展开∨";
      }
    },
    get() {
      let number = this.$route.query.number;
      if (number == 1) {
        this.Breadcrumb = [
          {
            name: "廉政档案",
            link: "/index/IncorruptibleArchives",
          },
          {
            name: "公司档案",
            link: "/index/IncorruptibleArchives/archives",
          },
          {
            name: "公司档案详情",
            link: "/index/IncorruptibleArchives/archives/Detail",
          },
          {
            name: "档案列表更多",
            link: "/index/IncorruptibleArchives/archives/ArchivesMore",
          },
          {
            name: "查看档案",
            link: "/index/IncorruptibleArchives/archives/Look",
          },
        ];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.finish {
  margin-left: 60px;
}
.box {
  margin-top: 20px;
}
.zhankai {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: -60px;
}
.lianxiren {
  margin-left: 60px;
}
.name {
  margin-right: 60px;
}
.banner {
  width: 100%;
  min-height: 500px;
  background: white;
  padding: 0px 40px;
  box-sizing: border-box;
}
.pic {
  width: 100px;
  height: 100px;
}
.pic img {
  width: 100px;
  height: 100px;
}
.companyName h3 {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 20px 0;
}
.box1 {
  margin-top: 20px;
  display: flex;
}
.text {
  width: 1418px;
  height: 100px;
}
.a {
  width: 80px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
}

h2 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  border-left: 4px solid #3d7fff;
  padding: 0 0 0 10px;
  margin-bottom: 39px;
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;

  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }
      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.note {
  font-size: 14px;
  color: #999;
}
.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}
.done {
  margin: 0 10px;
}
.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
.fileList {
  display: flex;
  flex-wrap: wrap;
}
.file_item {
  position: relative;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .right {
    font-size: 14px;
    .title {
      color: #333;
      margin-bottom: 10px;
    }
    .done_wrap {
      display: flex;
      align-items: center;
      .size {
        color: #999;
        margin-right: 110px;
      }
      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
.top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 95px;
  margin-bottom: 27px;
}
.top .left {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.top .center {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 0 5px;
}
.top .right {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.banner p {
  text-indent: 2em;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 26px;
}

.topBox .title {
  width: 100%;
  text-align: center;
  margin: 20px 0px 0px;
}
.title h3 {
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
}
.title span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 22px;
}
.topBox {
  padding: 20px;
  width: 100%;
  background: white;
  box-sizing: border-box;
}
.zhankai span {
  text-align: center;
  display: inline-block;
  width: 70px;
  height: 36px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(61, 127, 255, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(61, 127, 255, 1);
  line-height: 36px;
}
</style>